<template>
	<div class="setting">
		<div class="http">
			<div>
				<span>协议：</span>
				http
				<!-- <el-input style="width: 200px;" placeholder="输入追溯码" v-model="code_" clearable maxlength="50" /> -->
			</div>
			<div>
				<span>IP：</span>
				<el-input style="width: 200px;" placeholder="请输入IP地址" v-model="http_ip" clearable />
			</div>
			<div>
				<span>端口：</span>
				<el-input style="width: 200px;" placeholder="请输入端口" v-model="http_code" clearable />
			</div>
		</div>

		<div class="http ws">
			<div>
				<span>协议：</span>
				WS
				<!-- <el-input style="width: 200px;" placeholder="输入追溯码" v-model="code_" clearable maxlength="50" /> -->
			</div>
			<div>
				<span>IP：</span>
				<el-input style="width: 200px;" placeholder="请输入IP地址" v-model="ws_ip" clearable />
			</div>
			<div>
				<span>端口：</span>
				<el-input style="width: 200px;" placeholder="请输入端口" v-model="ws_code" clearable />
			</div>
		</div>

		<div style="margin-top: 50px;">
			<el-button type="primary" @click="getPallet">
				设置
			</el-button>
		</div>
	</div>
</template>

<script>
	const os = require('os'); //提供本地的相关信息
	console.log(os,'osos')
	export default {
		data() {
			return {
				http_ip: '',
				http_code: '',
				ws_code: '',
				ws_ip: ''
			}
		},
		created() {
			// this.getLocalIPAddress()
			this.getIPAddress();
			// console.log(navigator);
			// console.log(navigator.connection);
		},
		methods: {
			getPallet() {

			},
getIPAddress() {
      // 使用异步请求获取IP地址
      const url = 'https://api.ipify.org?format=json';
      fetch(url)
        .then(response => response.json())
        .then(data => {
          this.ipAddress = data.ip;
          console.log("本机ip地址",this.ipAddress);
        })
        .catch(error => {
          console.log('获取IP地址失败:', error);
        });
    },		}
	}
</script>

<style scoped lang="scss">
	.setting {
		.http {
			>div {
				height: 60px;

				span {
					display: inline-block;
					width: 50px;
				}
			}
		}

		.ws {
			margin-top: 30px;
		}
	}
</style>